<template>
  <el-carousel :height="bannerHeight + 'px'" type="card" style="text-align: center;">
    <el-carousel-item v-for="pic in worksPics" :key="pic.worksPic">
      <el-image
        :src="imgUrls + pic.worksPic"
        :preview-src-list="srcList"
        style="height: inherit;width: 90%;"
        fit="contain"
      >
      </el-image>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: "WorksPic",
  props: ["worksId"],
  data() {
    return {
      imgUrls: this.$imageUrl,
      worksPics: [],
      srcList: [],
    };
  },
  methods: {
    getPics() {
      this.$axios({
        url: "/works/getPics",
        params: { worksId: this.worksId },
      })
        .then((res) => {
          // console.log(res);
          this.worksPics = res.data.data;
          (this.srcList = []),
            this.worksPics.forEach((pic) => {
              this.srcList.push(this.imgUrls + pic.worksPic);
            });
        })
        .catch(() => {
          this.$message.warning("请求错误！");
        });
    },
  },
  mounted() {
    // 首次加载时,初始化高度
    this.screenWidth = window.innerWidth;
    this.bannerHeight = (250 / 1550) * this.screenWidth;
    // 窗口大小发生改变
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.bannerHeight = (250 / 1550) * this.screenWidth;
    };
  },
};
</script>

<style lang="less" scoped>

.el-carousel__item:nth-child(2n) {
//   background-color: hsla(17, 16%, 65%, 0.2);
background-image: linear-gradient(to top, rgba(130, 130, 130, 0), #ccc, #9a9a9a, rgba(182, 182, 182, 0.3), rgba(219, 219, 219, 0));
}

.el-carousel__item:nth-child(2n + 1) {
//   background-color: hsla(0, 16%, 73%, 0.2);
background-image: linear-gradient(to top, rgba(130, 130, 130, 0), #ccc, #9a9a9a, rgba(182, 182, 182, 0.3), rgba(219, 219, 219, 0));
}
</style>
